// 首页项目流程模块
<template>
  <div class="project-flow">
    <div class="box-out">
      <h6>项目流程</h6>
      <!-- 第一行 -->
      <ul class="row-one">
        <li class="iconfont icondevelopment">
          <h4>智能报价</h4>
          <h5>平台级大数据积累 按电梯拆解详细报价</h5>
          <h5>算算维保需要多少钱</h5>
          <i>
            <p>1</p>
          </i>
        </li>
        <li class="iconfont iconclipboard">
          <h4>项目前检</h4>
          <h5>平台级大数据积累 按电梯拆解详细报价</h5>
          <h5>算算维保需要多少钱</h5>
          <i>
            <p>2</p>
          </i>
        </li>
        <li class="iconfont iconresume">
          <h4>服务合同</h4>
          <h5>平台级大数据积累 按电梯拆解详细报价</h5>
          <h5>算算维保需要多少钱</h5>
          <i>
            <p>3</p>
          </i>
        </li>
      </ul>
      <!-- 第二行 -->
      <ul class="row-tow">
        <li class="iconfont iconsettings">
          <h4>维保在线确认</h4>
          <h5>平台级大数据积累 按电梯拆解详细报价</h5>
          <h5>算算维保需要多少钱</h5>
          <i>
            <p>4</p>
          </i>
        </li>
        <li class="iconfont iconpie-chart-2">
          <h4>可视化保养</h4>
          <h5>平台级大数据积累 按电梯拆解详细报价</h5>
          <h5>算算维保需要多少钱</h5>
          <i>
            <p>5</p>
          </i>
        </li>
        <li class="iconfont iconpurchasing">
          <h4>在线付费</h4>
          <h5>平台级大数据积累 按电梯拆解详细报价</h5>
          <h5>算算维保需要多少钱</h5>
          <i>
            <p>6</p>
          </i>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProjectFlow"
};
</script>
<style lang='scss' scoped>
.project-flow {
  width: 100%;
  height: 955px;
  background-color: #FFFFFF;
  overflow: hidden;
  .box-out {
   
    ul {
      height: 350px;
      background-color: #FFFFFF;
      font-size: 0px;
      text-align: center;
      &:nth-child(2){
       border-bottom: 1px solid #EEEEEE ;
      }
      li {
       &:last-child{
        border: 0;
       }
        position: relative;
        padding-top: 50px;
        font-size: 20px;
        display: inline-block;
        height: 100%;
        width: 390px;
        border-right: 1px solid #EEEEEE;
        box-sizing: border-box;

        &::before {
          font-size: 67px;
        }
        h4 {
          font-size: 24px;
          color: #1a1a1a;
          font-weight: 550;
        }
        h5 {
          font-size: 14px;
          font-weight: 100;
          &:nth-child(2) {
            margin-top: 40px;
          }
        }
        i {
          position: absolute;
          top: 195px;
          left: 186px;
          height: 16px;
          width: 16px;
          transform: rotate(45deg);
          background-color: #4f7bd9;
          font-size: 12px;
          text-align: center;
          color: #fff;
          border: 1px solid #fff;
          p {
            transform: rotate(-45deg);
            &::before {
              content: "";
              position: absolute;
              top: 7.2px;
              z-index: -1;
              left: -14px;
              background-color: #4f7bd9;
              height: 2px;
              width: 44px;
            }
          }
        }
      }
    }
    h6 {
      margin-top: 100px;
      color: black;
      display: block;
      text-align: center;
      font-size: 40px;
      height: 70px;
      font-weight: 500;
    }
  }
}
</style>